<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 标签分类：
            1）男标签  块级标签    独占一行
            2）女标签  行内标签    并排显示
            3）人妖标签   行内块标签   img   input   并排显示
    -->

    <!-- 使用img是在网页上插入一张图片，叫前景图 -->
    <!-- 有前景图，也有背景图，背景图是通过CSS来设置的 -->
    <!-- src叫属性，用来指定图片的路径 -->
    <!-- ./表示当前目录  谁的当前  此文件的当前-->
    <!-- 此处的./表示 02-常见的元素这个文件夹 -->
    <!-- 五笔 out -->
    <!-- 图片多大，在网页上显示的就多大，也就是说，默认这个图片是不放大，也不缩小的 -->
    <img src="./images/01.webp" alt="" >  <br>
    <!-- src是source的简写 -->
    <!-- 如果图片加载失败了，就显示alt对应的文本中的内容 -->
    <img src="./images/01.webp" alt="这是一张非常漂亮的图片">  <br>

    <!-- 所有的标签都有一个title属性，表示鼠标去摸时，提示内容 -->
    <img src="./images/01.webp" title="这是一张非常漂亮的图片">  <br>

    <!-- width是宽度的意思  height是高度的意思 -->
    <!-- 如果设置了width，那么高度会等比缩放 -->
    <!-- 如果设置了height，那么宽度会等比缩放 -->
    <img src="./images/01.webp" alt="" width="300px">
    <img src="./images/01.webp" alt="" height="300px">

    <!-- 宽高可以同时设置，同时设置，可能会造成图片变形 -->
    <img src="./images/01.webp" alt="" width="300px" height="300px">
</body>
</html>